<template>
	<view class="freightTemplate c3d">
		<image class="yfmbdb" @click.stop="$wanlshop.auth('/pages/m-shop/me/publishProduct/addCarriageTemplate')"
			src="https://img.aibbyp.com/wechat/images/yfmbdb.png" mode=""></image>
		<view class="yjdjBox">
			<view class="mt32 yjdj flex_sb">
				<view class="c3d f28 fb">
					一键到家
				</view>
				<view class="">
					<u-switch v-model="switchChecked" @change="changeSwitch"></u-switch>
				</view>
			</view>
			<view class="tac c3d f28 yjdj borderT" @click="$wanlshop.auth('/pages/user/freightTemplate/oneClickHome')">
				去设置运费内容
			</view>
		</view>

		<view class="flex_y_center mt32">
			<view class="f32 fb c3d">
				运费模板管理
			</view>
			<image class="yfmbIcon ml12" src="https://img.aibbyp.com/wechat/images/yfmbIcon.png" mode=""></image>
		</view>
		<view class="mt12 inputBox">
			<u-input type="text" v-model="name" placeholder="搜索运费模板" border @blur="getList" />
		</view>
		<view class="">
			<view class="mt20" v-for="(item,index) in list" :key="index">
				<u-swipe-action :show="item.show" @click="click" @open="open" :index="index" :options="options"
					class="mt20 uswipeaction">
					<view class="freightTemplateBox"
						@click.stop="$wanlshop.auth('/pages/m-shop/me/publishProduct/addCarriageTemplate?id=' + item.id)">
						<view class="f32">
							{{item.name}}
						</view>
						<view class="flex_sb f28 mt12">
							<view class="cd3b">
								到店自取
							</view>
							<view class="info">
								发货时间：{{item.delivery_text}}
							</view>
						</view>
						<view class="mt12 info f24">
							创建时间：{{item.createtime_text}}
						</view>
						<image v-if="item.isdelivery == 0" class="icons"
							src="https://img.aibbyp.com/wechat/images/zdy.png" mode=""></image>
						<image v-if="item.isdelivery == 1" class="icons"
							src="https://img.aibbyp.com/wechat/images/mjby.png" mode=""></image>
					</view>
				</u-swipe-action>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchChecked: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				list: [],
				name: '',
				sendHomeData: {},
			}
		},
		onLoad() {
			this.getList()
			this.getSendHome()
		},
		methods: {
			getSendHome() {
				this.$api.post({
					url: '/store.Logistics/getSendHome',
				}).then(res => {
					this.sendHomeData = res
					this.switchChecked = res.open_send == 1 ? true : false
				})
			},
			subSendHome() {
				this.$api.post({
					url: '/store.Logistics/editSendHome',
					data: this.sendHomeData,
					success: res => {
						this.getSendHome()
					}

				})
			},
			changeSwitch() {
				console.log(this.switchChecked);
				if (this.switchChecked) {
					this.sendHomeData.open_send = 1
				} else {
					this.sendHomeData.open_send = 0
				}
				this.subSendHome()
			},
			getList() {
				this.$api.get({
					url: '/store.Logistics/freightList',
					data: {
						page: '1',
						limit: '999',
						name: this.name,
					}
				}).then(res => {
					console.log(res);
					res.data.forEach(a => {
						a.show = false
					})
					this.list = res.data
				})
			},
			click(index, index1) {
				console.log('点击了删除', index, index1);
				this.$api.post({
					url: '/store.Logistics/FreightDel',
					data: {
						ids: [this.list[index].id]
					}
				}).then(res => {
					this.getList()
					uni.showToast({
						title: '已删除',
						icon: 'none'
					})
				})
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.cd3b {
		color: #3DBBF9;
	}

	.freightTemplate {
		padding: 28rpx 32rpx;

		::v-deep .u-swipe-action {
			border-radius: 16rpx;
		}
		.uswipeaction{
			width: 100%;
		}
		.freightTemplateBox {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 12rpx 28rpx;

			.icons {
				width: 120rpx;
				height: 34rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 99;
			}
		}

		.yfmbdb {
			width: 100%;
			height: 290rpx;
		}

		.yjdjBox {
			background-color: #fff;

			.yjdj {
				background: #fff;
				padding: 20rpx;
				height: 88rpx;
				align-items: center;
			}

			.borderT {
				border-top: 1rpx #eee solid;
			}
		}


		.yfmbIcon {
			width: 42rpx;
			height: 32rpx;
		}

		.inputBox {
			background: #fff;
		}
	}
</style>